<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图分布</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/style.css">
    <style type="text/css">
        #allmap{width:100%;height:700px;}
        .map_content{ padding: 12px; background: #fff; margin-top: 22px;}
        .mapBox>img{ width:100%; height: 104px; position: relative; margin-bottom: 8px;}
        .mapBox>p{ padding-bottom: 4px; font-size: 14px; color: #231916; overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
        .mapBox>p.state{ font-size: 14px; color: #F5A623;}
        .BMap_cpyCtrl{ display:none;  }
        .anchorBL{ display:none;}
    </style>
</head>
<body>
<div class="embedLeft">
    <div class="breadcrumb">
        <span>主页</span>
        <b>地图分布</b>
    </div>
    <div class="embedRight">
        <div class="map_content">
            <div id="allmap"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=OGT0AfctNjyaKaS52Gi8wmnrOAXp0kgU"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/base.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    map = new BMap.Map("allmap");
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    // map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 11);
        }
    }, { enableHighAccuracy: true });
    // var data_info = [
    //     {
    //         lat:'116.417854',
    //         lng:'39.921988',
    //         image:'http://pic.baike.soso.com/p/20131126/20131126095040-296572490.jpg',
    //         address:'武汉市洪山区江汉李222号',
    //         host:'张海军',
    //         mobile:'15252515255',
    //         state:'1'
    //     },
    //     {
    //         lat:'116.406605',
    //         lng:'39.921585',
    //         image:'http://pic.baike.soso.com/p/20131126/20131126095040-296572490.jpg',
    //         address:'北京市东城区东华门大街',
    //         host:'张海军',
    //         mobile:'15252515255',
    //         state:'2'
    //     },
    //     {
    //         lat:'116.412222',
    //         lng:'39.912345',
    //         image:'http://pic.baike.soso.com/p/20131126/20131126095040-296572490.jpg',
    //         address:'北京市东城区正义路甲5号',
    //         host:'张海军',
    //         mobile:'15252515255',
    //         state:'1'
    //     }
    // ];
    var data_info = JSON.parse('${rooms}');
    console.log(data_info);
    var opts = {
        width : 220,     // 信息窗口宽度
        height: 200,     // 信息窗口高度
        title : "" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };

    var myIcon1 = new BMap.Icon("${ctxPath}/static/police/images/Group11.png", new BMap.Size(47,52));//已租图标
    var myIcon2 = new BMap.Icon("${ctxPath}/static/police/images/Group13.png", new BMap.Size(47,52));//未租图标
    for(var i=0;i<data_info.length;i++){
        if(data_info[i].state=='1'){
            var marker = new BMap.Marker(new BMap.Point(data_info[i].lat,data_info[i].lng),{icon:myIcon1});  // 创建标注
            var stateText="已租";
        }else{
            var marker = new BMap.Marker(new BMap.Point(data_info[i].lat,data_info[i].lng),{icon:myIcon2});  // 创建标注
            var stateText="未租";
        }
        var content = '<div class="mapBox">' +
            '<div class="rentImg" style="background-image:url('+data_info[i].image+') "></div>'+
            '<p><span>地址：</span>'+data_info[i].address+'</p>'+
                          '<p><span>房东：</span>'+data_info[i].host+'</p>'+
                          '<p><span>联系电话：</span>'+data_info[i].mobile+'</p>'+
                          '<p class="state"><span>状态：</span>'+stateText+'</p>'+
                      '</div>';

        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content,marker);
    }
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            console.log(e)
            openInfo(content,e)
        });
    }
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }
</script>
</body>
</html>